<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from "mapbox-gl";
export default {
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map", 
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        // style: "mapbox://styles/mapbox/streets-v11",
        center: [118.79013542048335, 32.05775855185749],
        // projection: "mercator",
        zoom: 3,
        // hash: true,
        // repaint: true
      });

      const geojsonData = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {},
            geometry: {
              type: "Point",
              coordinates: [118.79013542048335, 32.05775855185749]
            }
          }
        ]
      };

    
      // 添加自定义的地震波纹层
      this.map.on("load", async() => {

        this.map.addSource("earthquake", {
          type: "geojson",
          data: geojsonData
        });

        this.map.addLayer({
          id: 'earthquake-circle',
          type: 'circle',
          source: 'earthquake',
          paint: {
            'circle-radius': 5,
            'circle-color': 'rgb(0, 0, 100)', 
            'circle-opacity': 0.5
          }
        });

        // const r = 255*0.65;
        // this.map.addLayer({
        //   id: 'earthquake-wave',
        //   type: 'circle',
        //   source: 'earthquake',
        //   paint: {
        //     'circle-radius': 15,
        //     //  'circle-color': 'rgba(0, 255, 255, 0.5)',  // 波纹颜色
        //     'circle-color': ['rgb', 255, 255, 255],  // 波纹颜色
        //     'circle-blur': -0.5,  // 波纹模糊程度
        //   }
        // });

        // // 启动动画
        // this.radius = 15;  // 初始波纹半径
        // this.maxRadius = 30;  // 波纹最大半径
        // this.expansionRate = 0.5;  // 波纹扩展速度
        // this.animate();

        // const iconId =  await this.loadImage('earthquake', './icons/circles.jpg');
        // const iconId =  await this.loadImage('earthquake', './icons/circles_transparent.png');
        const iconId =  await this.loadImage('earthquake', './icons/circles_blue.png');
        this.map.addLayer({
          id: 'earthquake-icon',
          type: 'symbol',
          source: 'earthquake',
          layout: {
            'icon-image': iconId,
            'icon-size': 0.2,
            'icon-allow-overlap': true
          }
        });
        // 启动动画
        this.radius = 15;  // 初始波纹半径
        this.maxRadius = 30;  // 波纹最大半径
        this.expansionRate = 0.5;  // 波纹扩展速度
        this.animate();



      });
    },
    animate() {
      if (this.radius < this.maxRadius) {
        this.radius += this.expansionRate;
        // this.map.setPaintProperty('earthquake-wave', 'circle-radius', this.radius);
        // 设置图标大小
        this.map.setLayoutProperty('earthquake-icon', 'icon-size', this.radius / 15 * 0.2);
      } else {
        this.radius = 15;
      }
      requestAnimationFrame(this.animate);
    },
    loadImage(iconId, url) {
      console.log(iconId, url);
      return new Promise((resolve, reject) => {
        this.map.hasImage(iconId) && resolve(iconId);
        this.map.loadImage(url, (error, image) => {
          if (error) {
            reject(error);
          } else {
            !this.map.hasImage(iconId) && this.map.addImage(iconId, image);
            resolve(iconId);
          }
        });
      });
    }
  },
};
</script>

<style></style>
